<template>
	<view>
		<view class="wrapper">
			<view class="topbar">{{MessageToInfo.toUserName}}{{MessageToInfo.createTime}}</view>
			<view class="title">{{MessageToInfo.title}}</view>
			<view class="content">
				{{MessageToInfo.content}}
			</view>
		</view>
		<view class="hr"></view>
		
		<view class="tab">
			<view class="tab-item" :class="tabIndex==0?'active':''"  @click="chgTab(0)">{{MessageToInfo.read.number}}人已读 <view :class="tabIndex==0?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==1?'active':''"  @click="chgTab(1)">{{MessageToInfo.unread.number}}人未读 <view :class="tabIndex==1?'active':''"></view></view>
		</view>
		
		
		<view class="" v-if='tabIndex==0' class="sign">
			<view v-for="itm in MessageToInfo.read.Info" class="sign-item">
				<view class="base">
					<image :src="itm.image" class="avatar"></image>
					<view>{{itm.name}}</view>
				</view>
			</view>
		</view>
		
		<view class="" v-if='tabIndex==1' class="sign">
			<view v-for="itm in MessageToInfo.unread.Info" class="sign-item">
				<view class="base">
					<image :src="itm.image" class="avatar"></image>
					<view>{{itm.name}}</view>
				</view>
				<view @click="tel(itm.phone)">
				   <image class="icon" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tel.png"></image>    
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0,
				MessageToInfo:'',
			}
		},
		onLoad(option){
			this.getMessageFromInfo(option.id)
		},
		methods: {
			chgTab(index){
				this.tabIndex = index;
			},
			tel(tel){
				uni.makePhoneCall({
					phoneNumber:tel
				})
			},
			//老师教务通知详情
			getMessageFromInfo(id){
				this.$api.getMessageFromInfo({
					id:id
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.MessageToInfo = res.data.dataMap
						// this.tabList[0].name = res.data.dataMap.read.number+'人已读'
						// this.tabList[1].name = res.data.dataMap.unread.number+'人未读'
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.sign{
		 
		  background-color: #F8F8F8;
		  .base{display: flex;align-items: center;}
		  .avatar{
		  		 margin-right: 10px;
		  		 height: 40px;width: 40px;border-radius: 50%;
		  }
		  .sign-item{
			  background-color: white;
			  padding:10px;
			  border-bottom: 1px solid #eeeeee;
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
		  }
	}
	
   .wrapper{padding:10px;}
  .topbar{color:#999999}
  .title{margin:10px 0;font-weight: bold;color:#333333;font-size:28rpx}
  .content{color:#666666;font-size:26rpx;}
  
  .tab{
     display: flex;
  	 background-color: white;
     justify-content: space-around;
  	 padding:15px 15px 0px 15px;
  	 box-sizing: border-box;
  	 border-bottom: 1px solid #eeeeee;
    	 .active{font-weight: bold;}
    	 .tab-item{
  		 font-size: 28rpx;
    		 border-bottom: 5px solid white;
    		 .active{
    		   	background:linear-gradient(90deg, rgb(255,228,106), rgb(249,155,68));
    		   	border-radius: 20rpx;
    		   	margin:auto;
    		   	margin-top:5px;
    		   	height:5px;
    		   	width:60%;}
    		 }
    }
</style>
